<!--  -->
<template>
  <div class="spring">
    <h3 class="title">疫情政策查询：</h3>
    <van-field
      v-model="goCity"
      is-link
      readonly
      label="出发地区"
      placeholder="请选择出发城市"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <van-field
      v-model="onCity"
      is-link
      readonly
      label="到达地区"
      placeholder="请选择到达城市"
      @click="show = true"
    />
    <van-popup v-model="show" round position="bottom">
      <van-cascader
        v-model="cascaderValue"
        title="请选择所在地区"
        :options="options"
        @close="show = false"
        @finish="onFinish"
      />
    </van-popup>
    <van-button type="info" block>查看政策</van-button>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "City",
  data() {
    return {
      show: false,
      goCity: "",
      onCity: "",
      cascaderValue:"",
      // 选项列表，children 代表子选项，支持多级嵌套
      options: [
        {
          text: "浙江省",
          value: "330000",
          children: [{ text: "杭州市", value: "330100" }],
        },
        {
          text: "江苏省",
          value: "320000",
          children: [{ text: "南京市", value: "320100" }],
        },
      ],
    };
  },
  mounted(){
    api.Cityapi.getCity({})
      .then((res)=>{
      console.log(res);
    }).catch((error)=>{
      console.log(error);
    })
  },
  methods: {
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join("/");
    },
  },
};
</script>

<style  scoped>
.spring{
  width: 100%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.spring .title{
  font-size: 0.16rem;
  margin: 0 0 0.08rem 0.16rem;
}
</style>
